<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div>
        <div id="app">
            <div>
                <!-- 要求小写变大写  -->
               <p>要求小写变大写</p> <h1>{{msg1 | toUpper}}</h1>
               <p>要求大写转小写</p> <h1>{{msg2 | toLower}}</h1>
            </div>
        </div>

    </div>
    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
    <script>
        // 全局过滤器 用Vue来定义  使用方法Vue.filter 
        Vue.filter('toUpper',(val)=>{
            // toUpperCase() 可以转化小写到大写JS 字符方法
            return val.toUpperCase()
        })

        var vm = new Vue({
            // 监管的容器 
            el: '#app',
            // 数据定义
            data: {
                msg1: 'abcdefg',
                msg2: 'ABCDEFG'
            },
            // 局部过滤器 局部过滤器加S filters 全局不用  Vue.filter
            filters:{
                toLower:(val)=>{
                    return val.toLowerCase()
                }
            }
        })

        console.log('vm', vm)



    </script>
</body>

</html>